<template>
  <div class="container">
    <h1 class="page-title">Student homepage</h1>
    <form @submit.prevent="saveInfo">
      <div>
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="name" required>
      </div>
      <div>
        <label for="gender">性别:</label>
        <select id="gender" v-model="gender" required>
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
      </div>
      <div>
        <label for="age">年龄:</label>
        <input type="number" id="age" v-model="age" required>
      </div>
      <div>
        <label>请假类型:</label>
        <button type="button" @click="setLeaveType('事假')">事假</button>
        <button type="button" @click="setLeaveType('病假')">病假</button>
      </div>
      <div v-if="leaveType">
        <label for="leaveReason">请假理由:</label>
        <textarea id="leaveReason" v-model="leaveReason" required></textarea>
      </div>
      <div>
        <label for="answer" class="label-text">回答问题:</label>
        <textarea id="answer" v-model="answer"></textarea>
      </div>
      <button type="submit" class="save-button">保存个人信息</button>

      <button @click="checkIn" :disabled="!infoSaved" class="punch-button">打卡</button>
      <button @click="submitAnswer" :disabled="!infoSaved || !answer" class="reply-button">提交回答</button>
    <p v-if="message">{{ message }}</p>
    </form>
  </div>
</template>
<script>
export default {
  name: 'StudentCheckIn',
  data() {
    return {
      name: '',
      gender: '',
      age: null,
      leaveType: '',
      leaveReason: '',
      answer: '',
      infoSaved: false,
      message: ''
    };
  },
  methods: {
    saveInfo() {
      localStorage.setItem('userInfo', JSON.stringify({
        name: this.name,
        gender: this.gender,
        age: this.age,
        leaveType: this.leaveType,
        leaveReason: this.leaveReason
      }));
      this.infoSaved = true;
      alert('信息已保存');
    },
    setLeaveType(type) {
      this.leaveType = type;
    },
    checkIn() {
      let checkIns = JSON.parse(localStorage.getItem('checkIns')) || [];
      checkIns.push({
        name: this.name,
        gender: this.gender,
        age: this.age,
        leaveType: this.leaveType,
        leaveReason: this.leaveReason,
        time: new Date().toLocaleString()
      });
      localStorage.setItem('checkIns', JSON.stringify(checkIns));
      this.message = this.leaveType ? '请假成功' : '打卡成功';
    },
    submitAnswer() {
      let answers = JSON.parse(localStorage.getItem('answers')) || [];
      answers.push({
        name: this.name,
        gender: this.gender,
        age: this.age,
        answer: this.answer,
        time: new Date().toLocaleString()
      });
      localStorage.setItem('answers', JSON.stringify(answers));
      this.message = '回答提交成功';
      this.answer = '';
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url("/src/333.jpg");
  background-size: cover;
  background-position: center;
}

.page-title {
  color: white;
  font-size: 50px;
  text-align: center;
  margin-top: 100px;
}

form {
  max-width: 400px;
  width: 100%;
  padding-top: 40px;                                                           /* 增加顶部内边距 */
  padding-bottom: 70px;                                                        /* 增加底部内边距 */
  padding-left: 50px;                                                          /* 保持左侧内边距不变 */
  padding-right: 50px;                                                         /* 保持右侧内边距不变 */
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
}

form input[type="text"],
form textarea {
  width: 30%;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

form select {
  width: 15%;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

form input[type="number"] {
  width: 20%;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

form div button {
  flex: 1;
  padding: 10px 15px;
  margin: 0 5px;
  font-size: 16px;
  border: none;
  background-color: #007BFF;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

form div button:hover {
  background-color: #0056b3;
}

textarea {
  width: 100%;
  height: 100px;
  min-width: 300px;
  resize: vertical;
  margin-left: 70px;
  margin-top: 20px;
}

.label-text {
  position: absolute;
  top: 200;
  left: 100;
}

.save-button {
  flex: 1;
  padding: 10px 15px;
  margin: 0 5px;
  font-size: 16px;
  border: none;
  background-color: #007BFF;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  margin-left: 130px;
}

form.save-button:hover {
  background-color: #0056b3;
}

.punch-button {
  flex: 1;
  padding: 8px 15px;                                             /* 增大按钮的内边距 */
  margin: 20px 0;                                                /* 调整按钮的上下外边距 */
  font-size: 16px;                                               /* 改变按钮文字大小 */
  border: none;
  background-color: #007BFF;
  color: white;margin-left: 130px;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;                                            /* 文字居中 */
  width: 20%;                                                    /* 设置按钮宽度为容器的一半 */
  margin-left: 150px;                                            /* 将左边距设置为自动，使按钮居中 */
}

form .punch-button:hover {
  background-color: #0056b3;
}


.reply-button {
  flex: 1;
  padding: 8px 15px;
  margin: 0 5px;
  font-size: 16px;
  border: none;
  background-color: #007BFF;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  margin-left: 143px;                                             /* 放置在打卡按钮下方 */
}

form.reply-button:hover {
  background-color: #0056b3;
}
</style>

